<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>用工批次填写</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>

        input{
            padding-right: 10px;
            margin-top: 10px;
            width: 230px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid #4169E1;

        }
        select{
            width: 230px;
            height: 50px;
        }
        table{
            margin-top:50px;
            margin-left: 400px;
        }
        table th{
            width:180px;

            margin-left: 50px;
        }
        table td{
            text-align: center;
            width:280px;
            height: 100px;
            margin-left: 50px;
        }
        .submitButton{
            margin-left: 600px;
            width: 95px;
            height: 45px;
            border-radius: 5px;
            color: white;
            background-color: #33CCFF;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/left::left}"></div>
    <!-- 内容主体区域 -->

    <div class="layui-body">

        <div  ><h1 >用工批次填写</h1>
            <form action="/hw_staff_writeBatch" method="post" onsubmit="return validateForm();" name="myForm">
                <table>
                    <tr><th>用工批次</th>
                        <th>状态</th>

                    </tr>
                    <tr>
                        <td><input type="text" name="batchTeam" placeholder="如：2019上半年"></td>
                        <td>
                            <select name="state">
                                <option value="0">开启</option>
                                <option value="1">关闭</option>
                            </select>
                        </td>

                    </tr>
                    <tr>
                        <th>需求报送开始时间</th>
                        <th>需求报送结束时间</th>
                    </tr>

                    <tr>
                        <td><input type="date" name="startTime" ></td>
                        <td><input type="date" name="endTime"></td>
                    </tr>
                    <tr>
                        <th>用工有效开始时间</th>
                        <th>用工有效结束时间</th>
                    </tr>
                    <tr>
                        <td><input type="date" name="applyStartTime" ></td>
                        <td><input type="date" name="applyEndTime"></td>
                    </tr>
                    <tr>
                        <th>每月提交工时时间</th>
                    </tr>
                    <tr>
                        <td><input type="text" name="submitTime" placeholder="如：每月20号"></td>
                    </tr>
                </table>
                <input type="submit" value="提交" class="submitButton">
            </form>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
    });




    function validateForm(){
        var batchTeam=document.forms["myForm"]["batchTeam"].value;
        var state=document.forms["myForm"]["state"].value;
        var submitTime=document.forms["myForm"]["submitTime"].value;
        var startTime=document.forms["myForm"]["startTime"].value;
        var endTime=document.forms["myForm"]["endTime"].value;
        var applyStartTime=document.forms["myForm"]["applyStartTime"].value;
        var applyEndTime=document.forms["myForm"]["applyEndTime"].value;
        if(batchTeam.length==0||state.length==0||submitTime.length==0||startTime.length==0||endTime.length==0||applyStartTime.length==0||applyEndTime.length==0){
            alert("输入不能为空");
            return false;
        }else if((startTime>endTime)||(applyStartTime>applyEndTime)){
            alert("用工有效开始时间不能大于结束时间");
            return false;
        }else if(endTime>applyEndTime){
            alert("需求报送结束时间不能大于用工有效结束时间");
            return false;
        }else if(startTime>applyStartTime){
            alert("需求报送开始时间不能大于用工有效开始时间");
            return false;
        }else{
            alert("提交成功");
            return true;
        }
    }
</script>
</body>
</html>